<template>
  <div
    class="order"
    v-if="order"
  >
    <h1>{{price}}</h1>
    <!-- 订单的表单 -->
    <div class="order_form">
      <OrderForm
        @priceComputed="priceComputed"
        :insurances="order.insurances"
      />
    </div>
    <!-- 订单账单 -->
    <div class="order_bill">
      <OrderBill />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: null,
      // 总价格
      price: 0,
    };
  },

  async mounted() {
    // id
    // seat_xid
    const { id, seat_xid } = this.$route.query;

    // /airs/6?seat_xid=123456
    const res = await this.$axios.get("/airs/" + id, { params: { seat_xid } });

    this.order = res.data;
  },
  methods: {
    priceComputed(data) {
      // console.log("父元素中",data);
      // ( 机票的单价 + 保险的总价格(可能是2个)  +  燃油费 )  * 乘机人数量
      // data ={ insurances:[1,2]  }
      // 机票的单价
      
      let par_price = this.order.seat_infos.par_price;
      // 燃油费
      let airport_tax_audlet = this.order.airport_tax_audlet;

      // 保险的价格
      let insurancesPrice = 0;

      data.insurances.forEach((id) => {
        // 保险对象  insurance 一定可以找到!!!
        const insurance = this.order.insurances.find((v) => v.id === id);
        insurancesPrice += insurance.price;
      });

      let price =
        (par_price + airport_tax_audlet + insurancesPrice) * data.userLength;
      this.price = price;
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  display: flex;
  padding-top: 20px;
  width: 1000px;
  margin: 0 auto;
  .order_form {
    width: 600px;
  }
  .order_bill {
    width: 350px;
  }
}
</style>